<script setup lang="ts">
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import { usePageScroll } from "@/hooks/scroll";
import { index_api } from "@/package/guider/api/guider_star";
import { Router } from "@/utils/router";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import ListGuiderItem from "./components/list-guider-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad(() => reloadList());
const { pageIsScroll, onPageScroll } = usePageScroll(() => {
  listLoadMore.value = listData.value.length > 1;
});
onReachBottom(() => loadMoreList());

const guiderClick = (id: string) => {
  Router.navigateTo(`/package/guider/pages/detail/index?id=${id}`);
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return index_api(query);
  });
</script>

<template>
  <NavBack />
  <NavBar />
  <NavBg
    :retract="pageIsScroll"
    url="/package/guider/static/star-list-bg.png"
  />
  <NavSpace />

  <view class="list-data">
    <view class="list-data-wrapper">
      <view
        class="list-data-item"
        v-for="i of listData"
        :key="i.guider_id"
        @click="guiderClick(i.guider_id)"
      >
        <ListGuiderItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>
</template>

<style lang="scss">
page {
  padding-top: 300rpx;
}

.list-data {
  .list-data-item {
    margin: 0 30rpx 40rpx 50rpx;
  }
}
</style>